<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <div class="usernum">
        <img src="../assets/images/indexuser.png"/>
        <span>用户数量</span>
      </div>
      <div class="today">
        <div class="tadd">
          <span class="addtext">今日新增</span>
          <p class="addnum">{{ userarr.dayUser }}<span>人</span></p>
          <img src="../assets/images/usericon.png" />
        </div>
        <div class="tadd1">
          <span class="addtext">本月新增</span>
          <p class="addnum">{{ userarr.monthUser }}<span>人</span></p>
          <img src="../assets/images/yewu.png" />
        </div>
        <div class="tadd2">
          <span class="addtext">累计总用户</span>
          <p class="addnum">{{ userarr.totalUser }}<span>人</span></p>
          <!-- <img src="../assets/images/usericon.png" /> -->
        </div>
      </div>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :sm="24" :lg="12">
        <div class="equinum">
          <img src="../assets/images/shebei.png"/>
          <span>设备数量</span>
        </div>
        <div class="sheadd">
          <div class="tsheadd">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/sheicon.png" />
              <span class="shetitle">今日新增</span>
            </div>
            <span class="shenum">{{ shebeiarr.dayEquipment }}<span class="shetai">台</span></span>
          </div>
          <div class="tsheadd1">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/sheicon1.png" />
              <span class="shetitle">本月新增</span>
            </div>
            <span class="shenum">{{ shebeiarr.monthEquipment }}<span class="shetai">台</span></span>
          </div>
          <div class="tsheadd2">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/sheicon2.png" />
              <span class="shetitle">累计总设备</span>
            </div>
            <span class="shenum">{{ shebeiarr.totalEquipment }}<span class="shetai">台</span></span>
          </div>
        </div>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 25px">
        <div class="equinum">
          <img src="../assets/images/yuyue.png"/>
          <span>预约服务</span>
        </div>
        <div class="sheadd">
          <div class="tsheadd">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/yuicon.png" />
              <span class="shetitle">今日预约成功数</span>
            </div>
            <span class="shenum">{{ yuyuearr.dayLaborer }}<span class="shetai">单</span></span>
          </div>
          <div class="tsheadd1">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/yuicon1.png" />
              <span class="shetitle">本月完成订单数</span>
            </div>
            <span class="shenum">{{ yuyuearr.monthLaborer }}<span class="shetai">单</span></span>
          </div>
          <div class="tsheadd2">
            <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
              <img src="../assets/images/yuicon2.png" />
              <span class="shetitle">累计完成订单数</span>
            </div>
            <span class="shenum">{{ yuyuearr.totalLaborer }}<span class="shetai">单</span></span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-divider /> -->
    <el-row :gutter="20" style="margin-top: 14px; margin-left: 5px">
      <el-date-picker
        v-model="value1"
        type="daterange"
        format='yyyy-MM-dd'
        value-format='yyyy-MM-dd'
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 15px">搜索</el-button>
    </el-row>
    <el-row :gutter="20" style="margin-top: 12px">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <div class="agess">
          <div class="agesss">
              <img src="../assets/images/ageimg.png" />
              <span class="shetitle">年龄段人数比例</span>
          </div>
          <div ref="chart" class="chart">
            
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <div class="agess">
          <div class="agesss">
              <img src="../assets/images/genderimg.png" />
              <span class="shetitle">男女占比</span>
          </div>
          <div class="gender">
            <div>
              <img style="margin-left: 130px" src="../assets/images/nan.png" />
            </div>
            <div>
              <img style="width: 77px" src="../assets/images/nv.png" />
            </div>
            <div class="bili">
              <div style="display: flex; align-items: center;">
                <div class="tuli"></div>
                <span style="margin-left: 14px; width: 150px">男性 {{ nannvarr[0].malePercent }}</span>
                <span style="margin-left: 57px">男性：{{ nannvarr[0].maleNumber }}</span>
              </div>
              <div style="display: flex; align-items: center; margin-top: 30px">
                <div class="tuli2"></div>
                <span style="margin-left: 14px; width: 150px">女性 {{ nannvarr[1].malePercent }}</span>
                <span style="margin-left: 57px">女性：{{ nannvarr[1].femaleNumber }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getuser, getshebei, getyuyue, getzhanbi, getdataSex } from "@/api/system/home";
export default {
  name: "Index",
  data() {
    return {
      value1: '',
      // 版本号
      version: "3.8.2",
      userarr: {},
      shebeiarr: {},
      yuyuearr: {},
      starTime: '',
      endTime: '',
      zhanbiarr: [],
      nannvarr: []
    };
  },
  created() {
    this.getUser()
    this.getShebei()
    this.getYuyue()
    this.getZhanbi()
    this.getDataSex()
  },
  mounted() {
    
  },
  methods: {
    // 查询用户数量
    getUser() {
      getuser().then(res => {
        // console.log(res)
        this.userarr = res.data
      });
    },
    // 查询设备数量
    getShebei() {
      getshebei().then(res => {
        // console.log(res)
        this.shebeiarr = res.data
      });
    },
    // 查询预约服务
    getYuyue() {
      getyuyue().then(res => {
        // console.log(res)
        this.yuyuearr = res.data
      });
    },
    // 查询年龄占比
    getZhanbi() {
      let parse = {
        starTime: this.starTime,
        endTime: this.endTime
      }
      getzhanbi(parse).then(res => {
        // console.log(res)
        this.zhanbiarr = res.data
        setTimeout(() => {
          this.agechart()
        }, 300);
      });
    },
    // 查询男女占比
    getDataSex() {
      let parse = {
        starTime: this.starTime,
        endTime: this.endTime
      }
      getdataSex(parse).then(res => {
        // console.log(res)
        this.nannvarr = res.data
      });
    },
    // 搜索
    handleQuery() {
      if(this.value1){
        this.starTime = this.value1[0] + '\xa0\xa0' + '00' + ':' + '00' + ':' + '00'
        this.endTime = this.value1[1] + '\xa0\xa0' + '23' + ':' + '59' + ':' + '59'
      } else {
        this.starTime = null
        this.endTime = null
      }
      // console.log(this.endTime)
      this.getZhanbi()
      this.getDataSex()
    },
    // 年龄段图表
    agechart() {
      echarts.init(this.$refs.chart).setOption({
        legend: {
          // top: 'right',
          orient: 'vertical',
          right: 120,
          top: 102,
          // bottom: 20,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}'
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '年龄段人数比例',
            type: 'pie',
            radius: [50, 120],
            center: ['40%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.zhanbiarr
          }
        ]
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
<style scoped>
.usernum{
  width: 100%;
  height: 54px;
  background: #ECF0FC;
  display: flex;
  align-items: center;
}
.usernum img {
  width: 30px;
  margin-left: 20px;
}
.usernum span {
  font-size: 20px;
  color: #000;
  padding-left: 4px;
}
.today {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.today .tadd {
  /* display: flex; */
  /* align-items: center; */
  width: 32%;
  /* height: 140px; */
  background-image: url("../assets/images/adduser.png");
  background-size: cover;
  margin-right: 22px;
}
.today .tadd1 {
  /* display: flex; */
  /* align-items: center; */
  width: 32%;
  /* height: 140px; */
  background-image: url("../assets/images/tadd1.png");
  background-size: cover;
  margin-right: 22px;
}
.today .tadd2 {
  /* display: flex; */
  /* align-items: center; */
  width: 32%;
  /* height: 140px; */
  background-image: url("../assets/images/tadd2.png");
  background-size: cover;
  margin-right: 22px;
}
.today .tadd .addtext {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-left: 30px;
  margin-top: 24px;
}
.today .tadd .addnum {
  font-size: 36px;
  color: #fff;
  margin-left: 65px;
  margin-top: 17px;
}
.today .tadd .addnum span {
  font-size: 16px;
  color: #fff;
  margin-left: 4px;
}
.today .tadd img {
  display: block;
  /* width: 76px; */
  height: 76px;
  /* margin-left: 110px; */
  margin-left: 415px;
  margin-top: -113px;
}
.today .tadd1 .addtext {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-left: 30px;
  margin-top: 24px;
}
.today .tadd1 .addnum {
  font-size: 36px;
  color: #fff;
  margin-left: 65px;
  margin-top: 17px;
}
.today .tadd1 .addnum span {
  font-size: 16px;
  color: #fff;
  margin-left: 4px;
}
.today .tadd1 img {
  display: block;
  /* width: 76px; */
  height: 76px;
  /* margin-left: 110px; */
  margin-left: 415px;
  margin-top: -113px;
}
.today .tadd2 .addtext {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-left: 30px;
  margin-top: 24px;
}
.today .tadd2 .addnum {
  font-size: 36px;
  color: #fff;
  margin-left: 65px;
  margin-top: 17px;
}
.today .tadd2 .addnum span {
  font-size: 16px;
  color: #fff;
  margin-left: 4px;
}
/* .today .tadd2 img {
  height: 76px;
  margin-left: 110px;
  margin-top: 39px;
} */
.equinum {
  width: 100%;
  height: 54px;
  background: #ECF0FC;
  display: flex;
  align-items: center;
}
.equinum img {
  width: 34px;
  margin-left: 10px;
}
.equinum span {
  font-size: 20px;
  color: #000;
  padding-left: 4px;
}
.sheadd {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.sheadd .tsheadd {
  width: 32%;
  height: 120px;
  background-image: url("../assets/images/yuyuebg.png");
  background-size: cover;
  margin-right: 10px;
}
.tsheadd img {
  display: block;
  height: 30px;
  margin-left: 28px;
  margin-top: 23px;
}
.tsheadd .shetitle {
  font-size: 20px;
  color: #666;
  margin-left: 10px;
  margin-top: 26px;
}
.tsheadd .shenum {
  display: block;
  font-size: 36px;
  color: #000;
  margin-left: 74px;
  margin-top: 10px;
}
.tsheadd .shenum .shetai {
  font-size: 16px;
  color: #000;
  margin-left: 4px;
}
.sheadd .tsheadd1 {
  width: 32%;
  height: 120px;
  background-image: url("../assets/images/yuyuebg1.png");
  background-size: cover;
  margin-right: 10px;
}
.tsheadd1 img {
  display: block;
  height: 30px;
  margin-left: 28px;
  margin-top: 23px;
}
.tsheadd1 .shetitle {
  font-size: 20px;
  color: #666;
  margin-left: 10px;
  margin-top: 26px;
}
.tsheadd1 .shenum {
  display: block;
  font-size: 36px;
  color: #000;
  margin-left: 74px;
  margin-top: 10px;
}
.tsheadd1 .shenum .shetai {
  font-size: 16px;
  color: #000;
  margin-left: 4px;
}
.sheadd .tsheadd2 {
  width: 32%;
  height: 120px;
  background-image: url("../assets/images/yuyuebg2.png");
  background-size: cover;
  margin-right: 10px;
}
.tsheadd2 img {
  display: block;
  height: 30px;
  margin-left: 28px;
  margin-top: 23px;
}
.tsheadd2 .shetitle {
  font-size: 20px;
  color: #666;
  margin-left: 10px;
  margin-top: 26px;
}
.tsheadd2 .shenum {
  display: block;
  font-size: 36px;
  color: #000;
  margin-left: 74px;
  margin-top: 10px;
}
.tsheadd2 .shenum .shetai {
  font-size: 16px;
  color: #000;
  margin-left: 4px;
}
.agess {
  width: 100%;
  height: 360px;
  background: #fff;
  box-shadow: 0px 4px 16px 1px rgba(220, 231, 255, 0.8);
  border-radius: 20px 20px 20px 20px;
}
.chart {
  width: 100%;
  height: 90%;
  margin-top: -20px;
}
.agesss {
  width: 100%;
  display: flex;
}
.agesss img {
  width: 20px;
  height: 20px;
  margin: 30px 0 0 30px;
}
.agesss span {
  font-size: 24px;
  color: #000;
  margin: 25px 0 0 14px;
}
.gender {
  display: flex;
}
.gender img {
  width: 65px;
  margin-right: 48px;
  margin-top: 68px;
}
.bili {
  font-size: 18px;
  color: #000;
  margin: 120px 0 0 70px;
}
.tuli {
  width: 12px;
  height: 12px;
  background: #0099FF;
  border-radius: 50%;
}
.tuli2 {
  width: 12px;
  height: 12px;
  background: #8167F5;
  border-radius: 50%;
}
</style>
